body,
html {
	height : 100%;
	width : 100%;
	margin : 0;
	padding : 0;
}

body {
	background: #cc2e8b;
	border: 8px solid #f7f2ec;
}

* {
	box-sizing: border-box;
	user-select: none;
}

.content {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 35%;
    transform: translate(-50%,-50%);
}

.logo-wrap {
    width: 100%;
    position: relative;
}


/* buttons */
h2.button {
	background-color: #b5287b;
	padding: 5px 8px;
	margin: 0 3px;
	border-radius: 5px;
	display: inline-block;
	text-transform: uppercase;
	font-family: "Trebuchet MS", Helvetica, sans-serif;
	font-size: 14px;
	letter-spacing: 2px;
	color: #f7f2ec;
	cursor: pointer;
}

h2.button:hover {
	background-color: #f7f2ec;
	color: #cc2e8b;
}

h2.button.inactive {
	background-color: #b5287b;
	color: #cc2e8b;
	cursor: default;
}


/* slider */
.range-slider .input-range {
	-webkit-appearance: none;
	width: 300px;
	height: 8px;
	border-radius: 4px;
	background: rgb(181, 40, 123);
	outline: none;
}

.range-slider .input-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #f7f2ec;
	border: 3px solid #cc2e8b;
	cursor: pointer;
}

.range-slider .input-range::-moz-range-thumb {
	width:20px;
	height: 20px;
	border: 0;
	border-radius: 50%;
	background: #353535;
	cursor: pointer;
}

.range-slider .input-range:active::-moz-range-thumb {
	background: #e06161;
}

.range-slider {
	bottom: 15%;
	position: absolute;
	left: 50%;
	margin-left: -150px;
}

::-moz-range-track {
	background: #ccc;
	border: 0;
}

input::-moz-focus-inner {
	border: 0;
}